<!--
 * 歌手专辑
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
    <div class="singer-album">
        <div class="album-slide">
            <div class="singer-img">
                <img :src="attachImageUrl(singer.pic)" />
            </div>
            <ul class="info">
                <li v-if="singer.sex == 0 || singer.sex == 1">
                    {{ attachSex(singer.sex) }}
                </li>
                <li>生日：{{ singer.birth | dateFormat }}</li>
                <li>故乡：{{ singer.location }}</li>
            </ul>
        </div>
        <div class="album-content">
            <div class="intro">
                <h2>{{ singer.name }}</h2>
                <span>{{ singer.introduction }}</span>
            </div>
            <div class="content">
                <album-content :songList="listOfSongs">
                    <template slot="title">歌单</template>
                </album-content>
            </div>
        </div>
    </div>
</template>
<script>
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import { songOfSingerId } from "../api/index";
import AlbumContent from "../components/AlbumContent";
export default {
    name: "singer-album",
    mixins: [mixin],
    components: {
        AlbumContent,
    },
    data() {
        return {
            singerId: "", //前面传来的歌手id
            singer: {
                name: "",
                introduction: "",
                birth: "",
                sex: "",
                pic: "",
            }, //当前歌手信息
        };
    },
    computed: {
        ...mapGetters([
            "listOfSongs", //当前播放列表
            "tempList", //当前歌手对象
            "loginIn", //用户是否已登录
            "userId", //当前登录用户id
        ]),
    },
    created() {
        this.singerId = this.$route.params.id;
        this.singer = this.tempList;
        this.getSongOfSingerId();
    },
    methods: {
        //根据歌手id查询歌曲
        getSongOfSingerId() {
            songOfSingerId(this.singerId)
                .then((res) => {
                    this.$store.commit("setListOfSongs", res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //获取性别
        attachSex(value) {
            if (value == 0) {
                return "女";
            } else if (value == 1) {
                return "男";
            }
            return "";
        },
    },
    filters: {
        dateFormat(value) {
            if (!value) return "";
            const date = new Date(value);
            const year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            // 月、日、小时、分钟、秒小于10时补0
            month = month < 10 ? "0" + month : month;
            day = day < 10 ? "0" + day : day;
            return year + "-" + month + "-" + day;
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/singer-album.scss";
</style>
